<template>
	<view>
		<z-paging ref="paging" v-model="floorList" @query="getFloorList">
			<!-- z-paging 分页插件，加载数据时用到，如要下拉刷新的那种 超过10条数据的那种 -->
			<!-- 轮播图 -->
			<view class="uni-margin-wrap">
				<!-- uview UI -->
				<u-swiper :list="swiperList" previousMargin="30" nextMargin="30" circular :autoplay="false" radius="10"
					keyName="image_src" @click="clickSwiper"></u-swiper>
			</view>
			<!-- 导航 -->
			<view class="nav-list">
				<view class="nav-list-item" v-for="item in navList" :key="item.name">
					<image :src="item.image_src" @click="navClickHandle(item)"></image>
				</view>
			</view>
			<!-- 楼层 -->
			<view class="floor-list" v-for="(item,index) in floorList" :key="index" style="margin: 10px 0">
				<view class="floor-title">
					<!-- {{item.floor_title.name}} -->
					<image :src="item.floor_title.image_src" style="width:100%;height:60rpx"></image>
				</view>
				<view class="floor-content" >
					<navigator class="floor-left" :url="item.product_list[0].navigator_url">
						<image :src="item.product_list[0].image_src"
							:style="{width:item.product_list[0].image_width+'rpx'}"> </image>
					</navigator>
					<!-- v-if="index!=0 这个是去掉第一张图片 -->
					<view class="floor-right">
						<navigator class="floor-right-item" v-for="(child,index) in item.product_list" :key="index"
							v-if="index!==0" :url="child.navigator_url">
							<image :src="child.image_src" :style="{width:child.image_width+'rpx'}"
								style="height: 230rpx"></image>
						</navigator>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiperList: [],
				navList: [],
				floorList: [],
			}
		},
		onLoad() {
			this._initData()
		},
		methods: {
			// 初始化数据
			_initData(){
				this.getSwiper()
				this.getNavList()
			},
			// 获取轮播图
			async getSwiper() {
				const {
					data: res
				} = await uni.$http.get('/api/public/v1/home/swiperdata')
				if (res.meta.status == 200) {
					this.swiperList = res.message
				} else {
					uni.$showMsg() //这个是封装下面的方法（挂载在main.js里） ，整个项目直接这么写调用就行
					// return uni.showToast({
					//   title:"数据加载失败！",
					//   duration:1500,
					//   icon:"none",
					// })
				}
			},
			// 获取轮播图下面的导航栏
			async getNavList() {
				const {
					data: res
				} = await uni.$http.get('/api/public/v1/home/catitems')
				if (res.meta.status = 200) {
					this.navList = res.message
				} else {
					uni.$showMsg()
				}
			},
			// 点击轮播图下面的导航栏  nav-item 项被点击时候的事件处理函数
			navClickHandle(item) {
				if (item.name == '分类') {
					uni.switchTab({
						url: '../cate/cate'
					})
				}
			},

			// 获取楼层信息
			async getFloorList() {
				const {
					data: res
				} = await uni.$http.get('/api/public/v1/home/floordata')
				if (res.meta.status == 200) {
					res.message.forEach(floor=>{
						floor.product_list.forEach(prod=>{
							prod.navigator_url='/subpkg/goods_list/goods_list?'+prod.navigator_url.split('?')[1]   //:url="'/subpkg/goods_list/goods_list?query=饰品'"
						})
					})
					console.log(res.message)
				  this.$refs.paging.complete(res.message)
				} else {
				  this.$refs.paging.complete(false)
				}
				
			},
			clickSwiper(e) {
				uni.navigateTo({
					url: '../../subpkg/goods_detail/goods_detail' + `?goods_id=${this.swiperList[e].goods_id}`
				})
			},
		}
	}
</script>

<style lang="scss">
	.uni-margin-wrap {
		width: 690rpx;
		width: 100%;
		margin-top: 20rpx
	}

	.swiper {
		height: 330rpx;
	}

	.swiper-item {
		display: block;
		height: 330rpx;
		line-height: 330rpx;
		text-align: center;

		.swiper-image {
			width: 100%;
		}
	}

	.nav-list {
		display: flex;
		justify-content: space-around;
		margin: 15px 0;

		.nav-list-item {
			image {
				width: 128rpx;
				height: 140rpx;
			}
		}
	}

	// 楼层
	.floor-list {
		.floor-content {
			display: flex;
			justify-content: space-between;

			.floor-right {
				display: flex;
				flex-wrap: wrap;

				.floor-right-item {
					margin: 0 5px;
				}
			}

		}
	}
</style>
